<%@ page contentType="text/html; charset=UTF-8"%>
<%
	String realPath = request.getContextPath();
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>南网图讯-首页</title>
<link type="text/css"
	href="<%=realPath%>/zenithsun/news/mobile/css/basic.css"
	rel="stylesheet">
<link type="text/css"
	href="<%=realPath%>/zenithsun/news/mobile/css/index.css"
	rel="stylesheet">
<script type="text/javascript"
	src="<%=realPath%>/baseNew/plugins/jQuery/jQuery-2.2.0.min.js"></script>
<script
	src="<%=realPath%>/zenithsun/news/mobile/js/jquery.mobile-1.4.3.min.js"></script>
<script
	src="<%=realPath%>/zenithsun/news/mobile/js/jquery-latest.min.js"></script>
<script src="<%=realPath%>/zenithsun/news/mobile/js/iscroll.js"></script>
<link type="text/css"
	href="<%=realPath%>/zenithsun/news/mobile/css/scroll.css"
	rel="stylesheet">

<script type="text/javascript">
	//页码
	var ncId = "${newscolumnId}",pageNum = 1,limit = 5,flag = false,realPath='<%=realPath%>';
	function doLoadNews() {
		$.post(realPath + "/path/newsinfo/listnewsjson", {
			"ncId" : ncId,
			"pageNo" : pageNum,
			"limit" : limit
		}, function(result) {
			if (result.state == 'Success') {
				//如果首次加载，清空容器
				if(pageNum == 1){
					$('#newsContainer').html('');
				}
				createNewsByTemplate(result.content);
				$('#dataLoading').hide();
			} else {
				alert("操作失败,原因：" + result.content);
			}
		});
	}

	/**
	 * 根据模板创建新闻信息
	 */
	function createNewsByTemplate(pageResult) {
		var len = pageResult.items.length;
		//如果数据小于行数，证明数据已至最后一页，不提提示加载下一页
		if(len < limit)
		{
			$("#next-page-loading").html('');
		}
		if (len > 0) {
			for (var index = 0; index < len; index++) {
				var newsInfo = pageResult.items[index];
				var template = $("#newsTemplate").html();
				var currNews = template;
				currNews = template4one(currNews, newsInfo);
				$("#newsContainer").append(currNews);
			}
			//pageNum++;
		} else {
			$("#next-page-loading").html('没有更多新闻了');
		}
	}

	function template4one(currNews, newsInfo) {
		currNews = currNews.replaceAll("%news.id%", newsInfo.id);
		currNews = currNews.replaceAll("%news.coverPath%", newsInfo.coverPath);
		currNews = currNews.replaceAll("%news.title%", newsInfo.title);
		currNews = currNews.replaceAll("%news.picNum%", newsInfo.picNum + "张");
		currNews = currNews.replaceAll("%news.publishTime%",newsInfo.publishTime);
		currNews = currNews.replaceAll("%news.editor%",	getNotBlank(newsInfo.editor));
		currNews = currNews.replaceAll("%news.photographer%",getNotBlank(newsInfo.photographer));
		currNews = currNews.replaceAll("%news.browseCount%", 100);
		return currNews;
	}

	function getNotBlank(v) {
		if (v == undefined) {
			return "";
		} else {
			return v;

		}
	}
	function changePage(href) {
		location.href = href;
	}
	String.prototype.replaceAll = function(s1, s2) {
		return this.replace(new RegExp(s1, "gm"), s2);
	}

	$(function() {
		//加载第一页数据
		doLoadNews();
		//滚动事件
		$(window).scroll(function () {
			//滚动条至底部
			if ($(window).scrollTop() == $(document).height() - $(window).height()) {
				//to bottom 
				$('#next-page-loading').html('正在加载...');
				pageNum = pageNum + 1;
				doLoadNews();
			}
			//滚动条至头部
			if($(window).scrollTop()==0){
				//to top
				$('#next-page-loading').html('');
				$('#newsContainer').html('<div style="text-align: center;">正在刷新...</div>');
				pageNum = 1;
				doLoadNews();
			}
		});
	});
</script>
</head>
<body>
	<div class="main-content">
		<section class="ind-list-grid" id="newsContainer"></section>
		<div class="main-content">
			<section class="ind-list-grid" id="newsContainer"></section>
			<div id="newsTemplate" style="display: none;">
				<div class="mod-img-area">
					<a href="javascript:changePage('<%=realPath%>/path/newsinfo/viewnewsphone?id=%news.id%');"
						class="mod-link-btn fn-pr"> <img src="<%=realPath%>%news.coverPath%">
						<div class="mod-img-info-grid">
							<div class="mod-wrap">
								<h2 title="" class="mod-img-title fn-wto">%news.title%</h2>
								<div class="mod-img-desc clearfix">
									<p class="fn-fl fn-wto">编辑：%news.editor% /
										摄影：%news.photographer%</p>
									<p class="fn-fr fn-wto">
										<span class="ind-time fn-fr">%news.publishTime%</span> <span
											class="ind-num fn-fr fn-dn"><i class="i-eye"></i>%news.browseCount%</span>
									</p>
								</div>
							</div>
						</div>
					</a>
				</div>
			</div>
			<div class="mod-load-txt j-loadingTxt" id="dataLoading">
				<i class="icon-spinner icon-spin"></i>数据加载中...
			</div>
			<div id="next-page-loading" style="text-align: center;">
				<br/>
			</div>
		</div>
	</div>
</body>
</html>